<script setup>
	import { ref,computed } from 'vue'
	import { store } from '@/uni_modules/uni-id-pages/common/store.js'
	import { reduceFun,totalFun,discrepancyFun,endCurrent } from '@/utils/reduceFun.js'
	import { onReachBottom } from '@dcloudio/uni-app'
	const userId = computed(() => store.userInfo._id)
	const db = uniCloud.database()
	const skipValue = ref(0)
	const inFinies = ref(false)
	
	const dataList = ref([])
	const getData = async () => {
		const res = await db.collection('leisure_list').where({
			status:1,
		}).orderBy('createTime desc').limit(5).skip(skipValue.value).get()
		const { data } = res.result
		// 处理数据
		const newArr = data.length && data.map(item => {
			let totalList = item.nameList.map(i => ({
			    name: i,
			    total: 0,
			    num: 0
			}));
			if(item.dataList.length){
				const totalNumberArr = totalFun(item.dataList)
				const discrepancyNumArr = discrepancyFun(totalNumberArr)
				item.totalList = totalList.map((val,key) => ({
					...val,
					total:totalNumberArr[key],
					num:discrepancyNumArr[key]
				}))
			}
			return item
		})
		if(inFinies.value){
			dataList.value = newArr
		}else{
			dataList.value = [...dataList.value,...newArr]
		}
		if(data.length < 5) inFinies.value = true
	}
	getData()
	
	onReachBottom(() =>{
		if(inFinies.value) return
		skipValue.value += 2
		getData()
	})
</script>

<template>
	<view class="list" v-for="item in dataList" :key="item._id">
		<view class="create-time">
			创建时间：{{item.createTime}}
		</view>
		<view class="flex name_content">
			<text class="flex left">姓名:</text>
			<view class="name_list flex">
				<view class="flex" v-for="nameItem in item.totalList" :key="nameItem.name" style="flex-direction: column;">
					<view style="font-size: 32rpx;">
						{{nameItem.name}}<text style="font-size: 28rpx;">({{nameItem.total}})</text>
					</view>
					<view :class="nameItem.num > 0 ? 'active' :nameItem.num < 0 ? 'error' : ''">{{nameItem.num}}</view>
				</view>
			</view>
		</view>
		<view class="history">
			<view class="history_content" v-for="(historyItem,historyInde) in item.dataList" :key="historyItem">
				<view class="title">第{{historyInde + 1}}局</view>
				<view class="container" v-for="(listItem,listIndex) in historyItem" :key="historyInde">
					<view class="left flex">
						{{listIndex + 1}}
					</view>
					<view class="history_list flex">
						<view class="history_item flex" :class="{active:listIndex == 0}" v-for="(item,ind) in listItem" :key="ind">
							{{(item == '0' && listIndex != 0)  ? '—' : item}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="flex" style="padding: 30rpx 0;">没有更多了...</view>
</template>

<style lang="scss" scoped>
	$bg-color:rgba(92, 211, 194,0.6);
	.create-time{
		padding: 10rpx;
		background: #1697ed;
	}
	.name_content{
		justify-content: space-between;
		height: 120rpx;
		.name_list{
			justify-content: space-around;
			flex: 1;
			height: 100%;
			color: #fff;
			background: $bg-color;
		}
		.name_item{
			background: $bg-color;
			width: 100%;
			height: 100%;
		}
	}
	
	.history{
		.title{
			color: #5CD5C6;
			font-weight: 700;
			padding: 0 20rpx;
		}
		&_list{
			justify-content: space-around;
			flex: 1;
		}
		&_item{
			flex: 1;
			height: 100rpx;
			border-bottom: 1rpx solid #eee;
		}
		.container{
			display: flex;
			justify-content: space-between;
		}
	}
	
	.left{
		width: 120rpx;
		height: 120rpx;
		background: $bg-color;
		color: #fff;
	}
	.active{
		color: #5CD5C6;
		font-weight: 700;
	}
	.error{
		color: #f00;
		font-weight: 700;
	}
</style>